<template>
  <view class="container">
    <view class="box" :style="'background-image: url('+$xyfun.image('/static/course/tu.png')+');'">
      <view class="top_tit">
        我的卷包
      </view>

      <view class="total">
        <view class="image">
          <image mode="widthFix" :src="$xyfun.image('/static/course/tu1.png')"></image>
        </view>
        <view class="detail">{{remain_count}}张</view>
      </view>

      <view class="count">
        <view class="item" @tap="$xyfun.to('/pages/user/coupons/my')">
          <view>总数</view>
          <text>{{total_count}}</text>
        </view>
        <view class="item" @tap="$xyfun.to('/pages/user/coupons/my')">
          <view>剩余</view>
          <text>{{remain_count}}</text>
        </view>
        <view class="item" @tap="$xyfun.to('/pages/user/coupons/log?type=use')">
          <view>已使用</view>
          <text>{{use_count}}</text>
        </view>
      </view>

    </view>


    <view class="menu">
      <view class="m_item" @tap="$xyfun.to('/pages/user/coupons/order')">
        <image class="image" mode="widthFix" :src="$xyfun.image('/static/course/tu3.png')"></image>
        <view class="title">订单</view>
      </view>
      <view class="m_item" @tap="$xyfun.to('/pages/user/coupons/log?type=use')">
        <image class="image" mode="widthFix" :src="$xyfun.image('/static/course/tu2.png')"></image>
        <view class="title">记录</view>
      </view>
    </view>

    <view class="buy_tit">
      信息查询卷购买
    </view>

    <view class="coupons" :style="'background-image: url('+$xyfun.image(item.bg_image)+');'">
      <image mode="widthFix" :src="$xyfun.image(item.image)"></image>
      <view class="info">
        <view class="title">{{item.name}}</view>
        <view class="price">
          <view class="cur">￥{{item.price}}</view>
          <view class="orignal">￥{{item.orginal_price}}</view>
        </view>

      </view>
      <view class="nums">
        <view @tap="coupons_minus">-</view>
        <view>{{buy_num}}</view>
        <view @tap="coupons_add">+</view>
      </view>
    </view>


    <view class="confirm">
      <view>￥{{payfee}}</view>
      <view @tap="handleShowDiaLog">立即购买</view>
    </view>
    <payPop ref='payPop' @createOrder="createOrder"></payPop>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import Pay from '@/utils/pay';
import payPop from '@/components/paypop/index.vue';

export default {
  components: {
    payPop
  },
  data() {
    return {
      item : {},
      total_count : 0,
      use_count : 0,
      remain_count : 0,
      payfee : 0,
      buy_num : 0
    }
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad() {
    this.loadData();
  },
  methods: {
    async loadData() {
      this.$api.postBase({
        url: 'coupons/info',
        loadingTip: '加载中...',
        data: {

        },
        success: res => {
          this.item = res.item;
          this.total_count = res.total_count;
          this.use_count = res.use_count;
          this.remain_count = res.remain_count;
        }
      })
    },
    coupons_add(){
      this.buy_num ++;
      this.count_money()
    },
    coupons_minus(){
      this.buy_num --;
      this.count_money()
    },
    count_money(){
      this.payfee = this.$xyfun.bcmul(this.buy_num,this.item.price);
    },
    handleShowDiaLog(param){
      this.$refs.payPop.showDiaLog(this.payfee)
    },
    //创建订单
    createOrder(pay_type){
      var that = this;
      // 提交订单
      this.$api.postBase({
        url: '/coupons/add_order',
        data: {
          buy_num:this.buy_num,
          pay_type:pay_type,
        },
        loadingTip: '提交订单中...',
        success: res => {
          //发起支付
          var pay = new Pay(pay_type, res, 'coupons');
          pay.payMehod().then((res)=>{
            that.disabled = false;
            that.$refs.payPop.disabled = false;
            uni.navigateBack({
              delta: 1
            });
            // pay.payResult(res)
          },(res)=>{
            that.disabled = false;
            that.$refs.payPop.disabled = false;
            // pay.payResult(res)
          });
        }
      });
    }
  }
}
</script>

<style>
page{
  background: linear-gradient(to bottom,#aae7fd, #e9eef0,#e9eef0);
}
</style>

<style lang="scss">
.container{
  padding-top: 20rpx;
  padding-bottom: 200rpx;
}
.box{
  background-size: 100% 100%;
  border-radius: 10rpx;
  padding: 20rpx 0 60rpx 20rpx;
  box-sizing: border-box;
  margin: 40rpx 50rpx -50rpx;
  position: relative;
  z-index: 1;
  .top_tit{
    font-weight: bold;
    margin-left: 10rpx;
  }


  .total{
    display: flex;
    align-items: center;
    margin-top: 30rpx;
    margin-left: 10rpx;
    .image{
      background: #fff;
      width: 80rpx;
      height: 80rpx;
      border-radius: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      image{
        width: 60rpx;
      }
    }
    .detail{
      display: inline-block;
      margin-left: 20rpx;
      font-size: 60rpx;
      font-weight: bold;
    }
  }

  .count{
    display: flex;
    justify-content: space-around;
    margin-top: 44rpx;
    margin-bottom: 10rpx;
    .item{
      font-weight: bold;
    }
  }
}

.menu {
  border-radius: 10rpx;
  background: #fff;
  display: flex;
  justify-content: space-around;
  padding-top: 80rpx;
  margin-left: 30rpx;
  padding-bottom: 20rpx;
  margin-right: 30rpx;
  position: relative;
  z-index: 0;
  .m_item{
    padding: 20rpx 0;
    width:44%;
    background: #e2f7ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    .image{
      width: 80rpx;
      height: 80rpx;
    }
    &:nth-of-type(2) image{
      width: 110rpx;
      height: 110rpx;
      margin-bottom: 10rpx;
    }
  }
  .title{
    margin-top: 20rpx;
    font-weight: bold;
  }
}

.buy_tit{
  margin-bottom: 20rpx;
  text-align: center;
  margin-top: 58rpx;
  font-weight: bold;
  font-size: 40rpx;
}


.coupons{
  width: 700rpx;
  height: 134rpx;
  background-size:100% 100%;   /* 背景图片按比例缩放，覆盖整个元素 */
  display: flex;
  margin-left: 20rpx;
  margin-bottom: 20rpx;
  image{
    width: 110rpx;
    height: 110rpx;
    margin-top: 20rpx;
    margin-left: 10rpx;
  }
  .info{
    place-items: baseline;
    margin-top: 10rpx;
    margin-left: 60rpx;
    .title{
      font-weight: bold;
    }
    .price{
      display: flex;
      align-items: flex-end;
      margin-top: 15rpx;
      .cur{
        font-size: 34rpx;
        color: red;
      }
      .orignal{
        color: #7a7a7a;
        text-decoration: line-through;
        font-size: 26rpx;
        margin-left: 15rpx;
      }
    }
  }
  .nums{
    height: 34rpx;
    display: flex;
    margin-left: auto;
    margin-top: 50rpx;
    margin-right: 20rpx;
    view{
      &:nth-of-type(1){
        border:1rpx solid #006fff;
        background: #fff;
        line-height: 25rpx;
        width: 34rpx;
        text-align: center;
        font-weight: bold;
        box-sizing: border-box;
      }
      &:nth-of-type(2){
        line-height: 33rpx;
        margin: 0 15rpx;
        font-weight: bold;
      }
      &:nth-of-type(3){
        border:1rpx solid #006fff;
        background: #fff;
        line-height: 30rpx;
        width: 34rpx;
        text-align: center;
        font-weight: bold;
        box-sizing: border-box;
      }
    }
  }
}


.confirm{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 40rpx 0 60rpx 0;
  view{
    &:nth-of-type(1){
      color: red;
      margin-left: 50rpx;
      font-weight: bold;
      margin-top: 10rpx;
    }
    &:nth-of-type(2){
      background: #eeaf3d;
      color: #fff;
      padding: 10rpx 40rpx;
      border-radius: 14rpx;
      margin-right: 40rpx;
    }
  }
}
</style>
